<template>
  <div style="margin: 20px">
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="id"
          width="40">
      </el-table-column>

      <el-table-column
          prop="title"
          label="标题"
          width="160">
      </el-table-column>

      <el-table-column
          prop="author"
          label="作者"
          width="100">
      </el-table-column>

      <el-table-column
          prop="summary"
          label="总结">
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>

import axios from "axios"

export default {
  name: "News",
  data() {
    return {
      tableData: [],
      currentPage:1,
      pageSize:3,
      total:3
    }
  },
  created() {
    this.load()
  },
  methods:{
    load(){
      axios.get("/api/findNews",{
        params:{
          currentPage:this.currentPage,
          pageSize:this.pageSize
        }
      }).then(res =>{
              console.log(res)
            this.tableData = res.data.data.list
            this.currentPage = res.data.data.pageNum
            this.pageSize = res.data.data.pageSize
            this.total = res.data.data.total
          })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.load()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.load()
    }
  }
}
</script>

<style scoped>

</style>